
import { useState } from 'react'
import { Layout, Menu } from 'antd'
import { HomeOutlined, MessageOutlined, HistoryOutlined } from '@ant-design/icons'
import RoomsPage from './components/RoomsPage'
import MessagePage from './components/MessagePage'
import SessionsPage from './components/SessionsPage'
import './App.css'

const { Content, Sider } = Layout;
  
function App() {
  const [currentPage, setCurrentPage] = useState('rooms');

  // 菜单项配置
  const menuItems = [
    {
      key: 'rooms',
      icon: <HomeOutlined />,
      label: '房间管理',
    },
    {
      key: 'messages',
      icon: <MessageOutlined />,
      label: '消息管理',
    },
    {
      key: 'sessions',
      icon: <HistoryOutlined />,
      label: '会话管理',
    },
  ];



  // 渲染当前页面内容
  const renderCurrentPage = () => {
    switch (currentPage) {
      case 'rooms':
        return <RoomsPage />;
      case 'messages':
        return <MessagePage />;
      case 'sessions':
        return <SessionsPage />;
      default:
        return <RoomsPage />;
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={200} style={{ background: '#fff' }}>
        <Menu
          mode="inline"
          selectedKeys={[currentPage]}
          items={menuItems}
          onClick={({ key }) => setCurrentPage(key)}
          style={{ height: '100%', borderRight: 0 }}
        />
      </Sider>
      <Layout>    
        <Content style={{ 
          background: '#f0f2f5',
          height: 'calc(100vh - 64px)',
          overflowY: 'auto'
        }}>
          {renderCurrentPage()}
        </Content>
      </Layout>
    </Layout>
  );
}

export default App
